﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>谷歌地图显示</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery,bootstrap" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-mapboxgl-local.js"></script>
    <!--引入当前页面样式表-->
    <link href="../../css/mapboxgl/style.css" rel="stylesheet" type="text/css" />
    <style type='text/css'>
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .dropdown {
            position: absolute;
            right: 20px;
            top: 10px;
            z-index: 1000;
        }
        .dropdown-menu {
            min-width: 95px;
        }
    </style>
    <script>
        //使用严格模式
        "use strict";
        var map ;
        /** 地图初始化
         */
        function init() {
            //实例化要加载的source来源对象（世界矢量地图）
            var vecsrc = {
                "type": "raster",
                'tiles': [
                   //来源请求地址，请求谷歌提供的世界矢量地图瓦片服务
                  "http://mt2.google.cn/vt/lyrs=m&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化Map对象加载地图
            map = new mapboxgl.Map({
                //地图容器div的id
                container: 'map',
                //设置地图样式信息
                style: {
                    //设置版本号，一定要设置
                    "version": 8,
                    //添加来源
                    "sources": {
                        "vecsrc": vecsrc
                    },
                    //设置加载并显示来源的图层信息
                    "layers": [
                         {
                             //图层id，要保证唯一性
                             "id": "vecsrc",
                             //图层类型
                             "type": "raster",
                             //连接图层来源
                             "source": "vecsrc",
                             //图层最小缩放级数
                             "minzoom": 0,
                             //图层最大缩放级数
                             "maxzoom": 22
                         }
                    ]
                }
              
            });
            //实例化要加载的source来源对象（世界影像+注记）
            var imgsrc = {
                "type": "raster",
                'tiles': [
                   //来源请求地址，请求谷歌提供的世界影像+注记瓦片服务
                  "http://mt1.google.cn/vt/lyrs=y&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
                ],
                'tileSize': 256
            };
            //实例化要加载的source来源对象（世界地形+矢量+注记）
            var terrainsrc = {
                "type": "raster",
                'tiles': [
                   //来源请求地址，请求谷歌提供的世界地形+矢量+注记瓦片服务
                  "http://mt2.google.cn/vt/lyrs=p&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}"
                ],
                'tileSize': 256
            }
            //注册地图加载事件
            map.on('load', function () {
                //添加来源，方法必须写在地图加载事件的回调函数里
                map.addSource("imgsrc", imgsrc);
                map.addSource("terrainsrc", terrainsrc);
                
            });

        }
        /** 图层切换
         */
        function changeLayer(src) {
            //获取地图的所有图层
            var Layers = map.getStyle().layers;
            var layerL = Layers.length;
            for (var i = 0; i < layerL; i++) {
                //移除图层
              map.removeLayer(Layers[i].id);
            }
            //添加图层
           map.addLayer({
                   "id": src,
                   "type": "raster",
                   //连接图层来源
                   "source": src,
                   "minzoom": 0,
                   "maxzoom": 22
            });
        }
    </script>
</head>
<body onload="init()">
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
            切换图层
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('vecsrc')">vector</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('imgsrc')">raster</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('terrainsrc')">terrian</a>
            </li>
        </ul>
    </div>
    <div id='map'>
    </div>
</body>
</html>
